<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta http-equiv="Content-Language" Content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta>
    <title>广播测试页面</title>
    <link href="{{asset('css/app.css')}}" rel="stylesheet">
</head>
<body>

<div>
    <h3>一 选择题</h3>
    <ol>
        @foreach($data as $key => $item)
            <li>
                <form>
                    <strong>{{$item['content']}}</strong><br>
                    @if(is_array($item['test_answer']))
                        @foreach($item['test_answer'] as $key => $value)
                            <input id="{{$item['id']}}" type="{{$item['type']}}" onchange="haha(this)"
                                   {{$item['answer'] == $key ? 'checked' : ''}}  name="{{$item['id']}}"
                                   value="{{$key}}">
                            <label for="{{$item['id']}}">{{chr($key)}} {{$value}}</label> <br>
                        @endforeach
                    @endif
                </form>
            </li>
        @endforeach
    </ol>
</div>
</body>
<script src="{{asset('js/app.js')}}"></script>

<script type="text/javascript">

    let examation = location.pathname.substring(location.pathname.indexOf('/') + 1, location.pathname.length);

    let user = location.search.substring(location.search.indexOf('?') + 1, location.search.length)

    // 监听
    window.Echo.channel(`exam.${examation}`).subscribed(() => {
        console.log('链接成功')
    }).listen('ExamingEvent', e => {
        console.log(e)
    }).listen('ExamedEvent', e => {
        console.log(e.message)
        // 事件触发 离开通道
        Echo.disconnect()
    })

    function haha(value) {
        let date = {
            'question_id': value.name,
            'answer': value.value,
            'user_id': 1,
            'fraction': 10
        }

        // 这里新增一个向服务端发送消息的方法
        // 第一个参数是事件名，这个可以随意写，不需要与 Laravel 中做对应
        // 第二个参数是具体数据，这个就更随意了
        window.Echo.connector.pusher.send_event('ExamingEvent', date)
    }
</script>
</html>
